<template>
  <div>
    <div class="bg">
      <div class="title">相册</div>
    </div>
    <div class="main card">
      <div class="item" v-for="(item, i) in list" :key="i">
        <el-image :src="item" lazy :preview-src-list="list"></el-image>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      pagesize: 1,
      list: [
        "/image/class.jpg",
        "/image/index.jpg",
        "/image/tag.jpg",
        "/image/wallhaven-83k32j.jpg",
        "/image/wallhaven-9628k.jpg",
        "/image/wallhaven.jpg",
      ],
    };
  },
  methods: {
    //引入本地图片
    getImageUrl(url) {
      return new URL(url, import.meta.url).href;
    },
    scroll() {
      window.addEventListener("scroll", () => {
        var top =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop ||
          0;
        var height = document.body.scrollHeight;
        var H = document.documentElement.clientHeight;
        console.log(height, top, H);
        if (height - top - H < 100) {
          console.log("正在加载数据");
        }
      });
    },
  },
  computed:{
    imglist(){
        var list =[]
        this.list.forEach(item=>{
           list.push( this.getImageUrl(item))
        })
        return list
    }
  },
  mounted() {
    // this.scroll()
  },
  beforeDestroy() {
    window.removeEventListener("scroll");
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/base.scss";
.bg {
  @include bg("/image/wallhaven-md9879.jpg");
  .title {
    font-size: 40px;
    font-weight: 900;
  }
}
.main {
  min-height: calc(40vh - 50px);
  max-width: 980px;
  margin: 0 auto;
  margin-top: 30px;
  padding: 20px;
  column-count: 2;
  column-gap: 10px;
  .item {
    width: 100%;
    img {
      width: 100%;
      height: auto;
    }
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 980px) {
  .main {
    margin: 0 5px !important;
  }
}
</style>